{% extends 'base.html' %}
{% block body %}
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-7">
                    {% for article in articles.object_list %}
                        <article class="card">
                            <div class="card__header">
                                <h2><a href="{% url 'article' article.id %}" style="color: #2e353b">{{ article.title }}</a></h2>

                                <small>
                                    <span><span style="font-weight: bold">发布时间</span>：{{ article.created_time }}</span>
                                    <span><span style="font-weight: bold">浏览</span>（{{ article.read }}）</span>
                                    <span><span style="font-weight: bold">分类</span>：{{ article.get_categories }}</span>
                                    <span><span style="font-weight: bold">标签</span>：{{ article.get_tag }}</span>
                                </small>
                            </div>
                            <div class="card__body">
                                <div id="test-editormd-view{{ article.id }}">
                        <textarea id="append-test" style="display:none;">{{ article.description }}</textarea>
                                </div>
                                <div class="blog-more">
                                    <a href="{% url 'article' article.id %}">阅读全文</a>
                                </div>
                            </div>
                        </article>
                    {% endfor %}
                    <nav class="text-center">
                        <ul class="pagination">
                            {# 是否有上一页 #}
                            {% if articles.has_previous %}
                                <li>
                                    <a href="?{{ articles.previous_page_number.querystring }}" aria-label="Previous">
                                        <i class="zmdi zmdi-chevron-left"></i>
                                    </a>
                                </li>
                            {% endif %}
                            {% for page in articles.pages %}
                                {% if page %}
                                    {% ifequal page articles.number %}
                                        {# 当前页 #}
                                        <li class="active"><a>{{ page }}</a></li>
                                    {% else %}
                                        {# 下一页 #}
                                        <li><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                    {% endifequal %}
                                {% else %}
                                    {# 页数过多显示什么 #}
                                    <li class="none"><a href="">...</a></li>
                                {% endif %}
                            {% endfor %}

                            {# 是否有下一页 #}
                            {% if articles.has_next %}
                                <li>
                                    <a href="?{{ articles.next_page_number.querystring }}" aria-label="Next">
                                        <i class="zmdi zmdi-chevron-right"></i>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
                <aside class="col-md-4 col-sm-5 hidden-xs">
                    <div class="card subscribe">
                    	<a href="{% url 'about' %}">
                        <div class="subscribe__icon">
                        	<img src="/static/blog/img/timg.gif" class="img-circle" style="height: 200px;width: 200px">
                        </div>
                        <h2 style="color: #2e353b">魏先森</h2>
                        <small style="color: #9c9c9c">做一个有内涵的知识分享者</small>
                        </a>
                    </div>


                    <div class="card">
                        <div class="card__header">
                            <h2>分类</h2>
                            <small>Hello，Categories！</small>
                        </div>

                        <div class="list-group">
                            {% for category in categories %}
                                <a href="{% url 'index' %}?category={{ category.name }}" class="list-group-item media">
                                    <strong style="float: left">{{ category.name }}</strong><strong style="float: right">({{ category.categories_article_count }})</strong>
                                </a>
                            {% endfor %}
                            <div class="p-10"></div>
                        </div>
                    </div>


                    <div class="card tags-list">
                        <div class="card__header">
                            <h2>标签</h2>
                            <small>Hello，tags！</small>
                        </div>
                        <div class="card__body">
                            {% for tag in tags %}
                                <a href="{% url 'index' %}?tag={{ tag.name }}" class="tags-list__item">#{{ tag.name }}</a>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="card">
                        <div class="card__header">
                            <h2>友情链接</h2>
                            <small>如果要交换友链，请联系我~</small>
                        </div>
                        <div class="list-group">
                            {% for link in links %}
                                <a href="{{ link.url }}" class="list-group-item media" target="_blank">
                                    <div class="media-body list-group__text">
                                        <strong>{{ link.name }}</strong>
                                        <small>{{ link.description }}</small>
                                    </div>
                                </a>
                            {% endfor %}
                            <div class="p-10"></div>
                        </div>

                    </div>

                </aside>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
<script type="text/javascript">
        $(function () {
//          {% for article in articles.object_list %}
                var testEditormdView{{ article.id }};
                testEditormdView{{ article.id }} = editormd.markdownToHTML("test-editormd-view{{ article.id }}", {
                    htmlDecode: "style,script,iframe",
                    markdownSourceCode: true,
                    emoji: true,
                    taskList: true,
                    tex: true,
                    flowChart: true,
                    sequenceDiagram: true
                });
//          {% endfor %}
        });
    </script>
{% endblock %}